<template>
  <div class="main">
    <div class="header">
      <div class="item" v-for="(item,index) in List" :key="index">
        <div class="image" @click="imageClick(item.name)">
          <router-link :to="`/chapter/${item.href}`">
            <!-- lazy给图片添加懒加载 -->
            <el-image :src="item.img" lazy>
              <!-- 使用slot插槽，如果图片加载失败，就使用默认的图片 -->
              <div slot="error">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F011a1658aebc9ea801219c77f61755.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664089689&t=3e9a9114cebde8e915b7089c749e72ce" alt="">
              </div>
            </el-image>
          </router-link>>

        </div>

        <!-- 简介 -->
        <dl>
          <dt>
            <span class="s1">{{item.name}}</span>
            <span class="s2">{{item.zuozhe}}</span>
          </dt>
          <dd>{{item.jianjie}}</dd>
        </dl>
      </div>

    </div>

    <div class="newscontent">
      <!-- v-show:true为元素显示。false为元素隐藏 -->
      <div class="left" v-show="searchResult.length!==0">
        <h2>最近更新列表</h2>

  <!--      <div class="search_result">
            <ul>
              <li v-for="(item,index) in searchResult" :key="index">
                <span class="s1">{{item.type}}</span>
                <span class="s2" @click="jump(item)">
                  <a>{{item.bookname}}</a>
                </span>
                <span class="s3" @click="jump2(item)">
                  <a>{{item.newChapter}}</a>
                </span>
                <span class="s4">
                  {{item.author}}
                </span>
              </li>

            </ul>

        </div> -->

    <!-- 专门用来显示更新小说的组件 -->
          <!-- <div>
            <List :searchResult=searchResult></List>
          </div> -->

             <!-- 底部最新更新小说列表 -->
      <div class="bottom">
       <div class="newloadnlvel">
         <List :searchResult=searchResult></List>
       </div>
        <!-- <div class="newNovel">
           <h3 v-show="putinStorage.length!==0">最新入库小说</h3>
          <NewList :searchResult="putinStorage"></NewList>
        </div> -->
      </div>
      </div>

      <div class="right" v-show="searchResult.length!==0">
        <h2>最新入库小说</h2>

             <!-- 底部最新更新小说列表 -->
      <div class="bottom">
        <div class="newNovel">
          <NewList :searchResult="rightNovel"></NewList>
        </div>
      </div>
      </div>

    </div>
  </div>
</template>
<script>
import List from '@/components/List/index.vue'
import NewList from '@/components/newList/newList.vue'
export default {
  name: 'TyPe',
  data () {
    return {
      List: [],
      searchResult: [],
      rightNovel: []
    }
  },
  components: {
    List,
    NewList
  },
  async mounted () {
    const res = await this.$API.reqType({ name: this.name })
    setTimeout(() => {
      this.List = res.data.Book
      this.searchResult = res.data.searchResult
      this.rightNovel = res.data.Rightnovel
    }, 500)
  },
  methods: {
    imageClick (name) {
      this.$store.commit('SETNAME', name)
      // this.$router.push({ path: `/chapter/${href}` })
    }
    /*    jump (item) {
      // 点击书名，触发SETNAME函数，将书名传递过去，
      this.$store.commit('SETNAME', item.bookname)
      // 跳转章节内页面
      this.$router.push(`/chapter/${item.href}`)
    },
    jump2 (item) {
      // 点击章节，先触发Setchapter函数，重新获取当前小说的所有章节
      this.$store.commit('Setchapter', item)
      // 跳转到内容页面
    } */
  },
  computed: {
    name () {
      return this.$route.params.genre
    }
  },
  watch: {
    // 监听路由，只要路由发生改变，就执行里面的逻辑
    // 监听当前路由，不管是进入到type路由还是离开type路由，都会触发监听路由，都会执行里面的逻辑
    async '$route' () {
      // 判断，如果当前要跳转的路由是'/home'就不执行路由改变时的逻辑
      if (this.$route.path === '/home') {
        return this.$router.push('/home')
      }
      // 判断，如果跳转的路由是chapter的话，就直接跳转到chapter页面，就不执行监听路由的逻辑
      if (this.$route.matched[0].components.default.name === 'ChaPter') {
        const id = this.$route.params.id
        return this.$router.push(`/chapter/${id}`)
      }
      // if (this.$route.name === 'content') {
      //   const path = this.$route.path
      //   return this.$router.push(path)
      // }
      // 点击首页发起type请求是因为这里的路由改变了，路由改变就会发起type请求
      const res = await this.$API.reqType({ name: this.name })
      this.List = res.data.Book
      this.searchResult = res.data.searchResult
      this.rightNovel = res.data.Rightnovel
    }
  }

}
</script>
<style lang="less" scoped>
.main {
  padding: 0 50px;
  .header {
    width: 100%;
    // height: 320px;
    padding: 5px;
    margin: 0px 0px 10px 0px;
    overflow: hidden;
    border: 3px solid #c8d4e1;

    display: flex;
    flex-wrap: wrap;

    .item {
      width: 33%;
      height: 160px;
      border: 1px solid pink;
      display: flex;
      margin-bottom: 10px;
      .image {
        width: 120px;
        height: 160px;
        display: inline-block;
    overflow: hidden;
        .el-image {
          width: 100%;
          height: 160px;
        }
      }
      dl {
        // display: inline-block;
        flex: 1;

        dt {
          display: flex;
          text-align: left;
          padding: 0 20px;
          margin-bottom: 5px;
          height: 25px;
          line-height: 25px;
          .s1 {
            flex: 0.8;
            overflow: hidden;
          }
          .s2 {
            flex: 0.3;
            overflow: hidden;

            text-align: right;
          }
          span {
            flex: 1;
          }
        }
        dd {
          text-indent: 1cm;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 5; // 超出多少行

          -webkit-box-orient: vertical;
          // line-height: 10px;
          // height: 100%;
          padding-left: 20px;
        }
      }
    }
  }
}
li{
  cursor: pointer;
}
.left,.right{
  h2{
    margin-bottom: 15px;
  }
}
.search_result{
  margin: 0;
}

.newscontent{
  display: flex;
  .left{
    flex: 1;
  }
  .right{
    margin-left: 105px;
  }
}

</style>
